<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'CZMLPath',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            const viewer = window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                }),
                shouldAnimate: true,//开启动画
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;





            const czml = [//pocket
                //必须的节点，document
                {
                    id: "document",
                    name: "CZML Path",
                    version: "1.0",
                    clock: {
                        interval: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                        currentTime: "2012-08-04T10:00:00Z",
                        multiplier: 100,
                    },
                },
                {
                    id: "path",
                    name: "path with GPS flight data",
                    description:
                        "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
                    availability: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                    path: {
                        material: {
                            polylineOutline: {
                                color: {
                                    rgba: [255, 0, 255, 255],
                                },
                                outlineColor: {
                                    rgba: [0, 255, 255, 255],
                                },
                                outlineWidth: 5,
                            },
                        },
                        width: 8,
                        leadTime: 5,
                        trailTime: 50000,
                        resolution: 5,
                    },
                    orientation: {
                        "unitQuaternion": [
                            0.19134171618254486,
                            -0.3314135740355918,
                            0.4619397662556433,
                            0.8001031451912656,
                        ]
                    },
                    model: {
                        gltf: '/model/glb/Cesium_Air.glb'
                    },
                    position: {
                        epoch: "2012-08-04T10:00:00Z",
                        cartographicDegrees: [
                            0,
                            -122,
                            39.50935,
                            8776,
                            3000,
                            -122,
                            39.60918,
                            8773,
                            4000,
                            -122,
                            39.70883,
                            8772
                        ]
                    }
                }
            ];
            let dataSource = await viewer.dataSources.add(window.Cesium.CzmlDataSource.load(czml));
            viewer.trackedEntity = dataSource.entities.getById("path");
            // viewer.trackedEntity.orientation = Cesium.Quaternion.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-60), Cesium.Math.toRadians(45), Cesium.Math.toRadians(0)));
            // console.log(viewer.trackedEntity.orientation)

            // let matrix = viewer.trackedEntity.computeModelMatrix(Cesium.JulianDate.fromIso8601('2012-08-04T10:00:00Z'))
            // viewer.scene.primitives.add(
            //     new Cesium.DebugModelMatrixPrimitive({
            //         modelMatrix: matrix,  // primitive to debug
            //         length: 100000.0,
            //         width: 10.0
            //     })
            // );
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  